<template>
  <el-container>
    <el-aside style="width: 220px">
      <h1 class="menuTitle">明细</h1>
      <el-menu
        :collapse="isCollapse"
        default-active="1"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        background-color="white"
      >
        <el-menu-item index="1">
          <i class="el-icon-user"></i>
          <span slot="title">账单</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">添加</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">预算</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div v-if="activeMenuIndex == 1">
            <span>账单列表</span>
            <el-button style="float: right" type="primary" size="small"
              >添加账单</el-button
            >
          </div>
          <div v-if="activeMenuIndex == 2">
            <span>账单日历</span>
            <el-button style="float: right" type="primary" size="small"
              >添加账单</el-button
            >
          </div>
          <div v-if="activeMenuIndex == 3">
            <span>预算管理</span>
            <el-button
              style="float: right"
              type="primary"
              @click="openBudgetDialog"
              size="small"
              >修改预算</el-button
            >
          </div>
        </div>
        <div v-if="activeMenuIndex == '1'">
          <div><billDetail></billDetail></div>
        </div>
        <div v-if="activeMenuIndex == '2'">
          <div><billAdd></billAdd></div>
        </div>
        <div v-if="activeMenuIndex == '3'">
          <div><budget ref="budget"></budget></div>
        </div>
        <div v-if="activeMenuIndex == '4'"></div>
      </el-card>

    </el-main>
    <el-dialog
      title="修改预算"
      :visible.sync="budgetDialog"
      width="30%"
      :before-close="handleClose"
    >
      预算：
      <el-input
        placeholder="请输入金额"
        suffix-icon="el-icon-money"
        v-model="budgetMoney"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="budgetDialog = false">取 消</el-button>
        <el-button type="primary" @click="editBudget()">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import BillAdd from "@/components/BillAdd/index";
import BillDetail from "@/components/BillDetail/index";
import Budget from "@/components/Budget/index";
import { updateTeamById } from "@/api/team";
import { updateById } from "@/api/user";
export default {
  components: {
    BillAdd,
    BillDetail,
    Budget,
  },
  data() {
    return {
      tabTitle: "",
      activeMenuIndex: "1",
      bill: {
        minAmount: "",
        maxAmount: "",
        type: "",
        isIncome: "",
        userName: "",
        teamName: "",
        isTeam: "",
        remark: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: 10,
      tableData: [],
      isCollapse: false,
      budgetDialog: false,
      budgetMoney: "",
    };
  },
  mounted() {},
  methods: {
    handleSelect(key) {
      this.activeMenuIndex = key;
    },
    changeMenuStatu() {
      if (this.isCollapse) {
        this.isCollapse = false;
      } else {
        this.isCollapse = true;
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex);
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch({});
    },
    openBudgetDialog() {
      this.budgetDialog = true;
    },
    editBudget() {
      const teamInfo = {
        teamName: this.$store.getters.teamName,
        budgetMoney: this.budgetMoney,
      };
      console.log(teamInfo);
      if (teamInfo.teamName == "个人版") {
        const param = {
          userName: this.$store.getters.name,
        };
        updateById(param).then((result) => {
          if (result.code == 0) {
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
            this.budgetDialog = false;
          } else {
            this.$message({
              showClose: true,
              message: "修改失败",
              type: "error",
            });
          }
        });
      } else {
        updateTeamById(teamInfo).then((res) => {
          if (res.code == 0) {
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
            this.budgetDialog = false;
          } else {
            this.$message({
              showClose: true,
              message: "修改失败",
              type: "error",
            });
          }
        });
      }
      this.$refs.budget.getLogUser();
    },
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  margin-left: 30%;
}
.el-aside {
  background-color: white;
  color: #333;
  height: 93vh;
  padding: 0;
  width: 10%;
}

.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  height: 99vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.item {
  margin-left: 30px;
}
.el-card {
  height: 100%;
}
.menuTitle {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 20px;
}
.el-menu {
  margin-top: 20px;
}
</style>